<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/echarts.js"></script>
    <script src="/jquery-2.1.1.min.js"></script>
</head>
<script  type="text/javascript">
    $(function () {
        initDomDiv();
    });

    function  initDomDiv(){
        var  myChart=echarts.init(document.getElementById('bar'));

        $.ajax({
            url:"../echarts/queryOrderForm",
            type:"POST",
            async:false,
            success:function(resulty){
                var dat=new Array();
                var cou=new Array();
                var dat2=new Array();
                $.each(resulty,function(index,obj){
                    dat[index]=obj.sname;
                    cou[index]=obj.count;
                    dat2[index]={name:''+obj.sname+'',value:obj.count};
                });
                console.log(dat);
                console.log(cou);
                console.log(dat2);


                var option = {
                    title: {
                        text: 'ECharts 入门示例',
                        textStyle: {
                            color: '#000',
                            fontStyle: 'italic'
                        }
                    },
                    tooltip: {},
                    legend: {

                        data:dat
                    },
                    xAxis: {},
                    yAxis: {},
                    series: {
                        type: 'pie',
                        data: dat2
                    }
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            },
            error:function(){
                alert("AJAX访问异常");
            }
        })

    }
</script>

<body>

<div  id="bar"   style="width:1000px;height:600px;" ></div>

</body>
</html>